/**
 * 报警统计
 */
import { Card, Divider, Modal } from "antd";
import icon_baojingtongji from "../../../../../../assets/img/dianqianquan/icon_baojingtongji.png";
import * as React from "react";
import ReactEcharts from "echarts-for-react";
import { getDeviceDataList, getDeviceWarnDataList } from "../../../ServeApi";
import "./index.less";
import moment from "moment";
import { AjaxData } from "../../../../../../data/interface/publicInterface";
export interface WarnStatisticsProps {}

export interface WarnStatisticsState {}

class WarnStatistics extends React.Component<
  WarnStatisticsProps,
  WarnStatisticsState
> {
  private option = {
    title: {
      text: "125条",
    },
    tooltip: {
      trigger: "item",
      formatter: "{a} <br/>{b}: {c} ({d}%)",
    },
    series: [
      {
        name: "报警趋势分析",
        type: "pie",
        radius: ["45%", "60%"],
        labelLine: {
          length: 1,
        },
        label: {
          show: false,
          position: "center",
        },
        data: [
          { value: 85, name: "故障事件总数" },
          { value: 40, name: "报警事件总数" },
        ],
      },
    ],
  };
  private data: any[] = [];
  private wList: any = null;
  render() {
    return (
      <div className="WarnStatistics">
        <Card
          title={
            <>
              <img src={icon_baojingtongji} alt="报警统计" />
              报警统计
            </>
          }
        >
          <ReactEcharts
            option={this.option}
            notMerge={true}
            lazyUpdate={true}
            style={{ height: 200, width: "100%" }}
            // theme="dark"
          />
          <Divider />
          <div className="warnMessage">
            <div className="title">实时告警信息</div>
            <div
              className="wList"
              id="wList"
              ref={(el) => {
                this.wList = el;
              }}
            >
              <ul>
                {this.data.map((item, index) => {
                  return (
                    <li key={index}>
                      <p>
                        <span>设备名称：</span>
                        {item.deviceName}
                      </p>
                      <p>
                        <span>事件类型：</span>
                        {item.eventType}
                      </p>
                      <p>
                        <span>事件报告：</span>
                        {item.content}
                      </p>
                      <p>
                        <span>发生时间：</span>
                        {moment(item.dataTime).format("YYYY年MM月DD日")}
                      </p>
                    </li>
                  );
                })}
              </ul>
            </div>
          </div>
        </Card>
      </div>
    );
  }
  componentWillMount() {
    this.getDeviceDataList();
    this.getDeviceWarnDataList();
  }
  componentDidMount() {}
  getOption(alarmNum: number, faultNum: number, total: number) {
    return {
      title: {
        text: total + "条",
      },
      tooltip: {
        trigger: "item",
        formatter: "{a} <br/>{b}: {c} ({d}%)",
      },
      series: [
        {
          name: "报警趋势分析",
          type: "pie",
          radius: ["45%", "60%"],
          labelLine: {
            length: 1,
          },
          label: {
            show: false,
            position: "center",
          },
          data: [
            { value: faultNum, name: "故障事件总数" },
            { value: alarmNum, name: "报警事件总数" },
          ],
        },
      ],
    };
  }
  //告警统计数据
  async getDeviceDataList() {
    try {
      let pream = {
        start: moment().add(-3, "day").valueOf(),
        end: moment().valueOf(),
        isHandle: "0",
      };
      let res: any = await getDeviceDataList(JSON.stringify(pream));
      let json: AjaxData = res;
      if (json.success) {
        let { alarmNum, faultNum, total } = json.data;
        this.option = this.getOption(alarmNum, faultNum, total);
        this.forceUpdate();
      }
    } catch (error) {
      Modal.error({
        title: `初始化告警统计数据，无法读取告警统计数据，请刷新页面。`,
      });
    }
  }
  //当天告警信息
  async getDeviceWarnDataList() {
    try {
      let pream = {
        isHandle: "0",
      };
      let res: any = await getDeviceWarnDataList(JSON.stringify(pream));
      let json: AjaxData = res;
      if (json.success) {
        this.data = json.data;
        this.forceUpdate();
        if (json.data.length > 3) {
          this.onScrollTop();
        }
      }
    } catch (error) {
      Modal.error({
        title: `初始化告警信息失败，无法读取告警信息，请刷新页面。`,
      });
    }
  }

  onScrollTop() {
    let oUl = this.wList.getElementsByTagName("ul")[0];
    oUl.innerHTML += oUl.innerHTML;
    let aLi = oUl.getElementsByTagName("li");
    let jie = (aLi.length * 166) / 2;
    let timer = setInterval(() => {
      oUl.style.top = oUl.offsetTop - 5 + "px";
      if (oUl.offsetTop < -jie) {
        oUl.style.top = "0px";
      }
    }, 30);
    oUl.addEventListener(
      "mouseover",
      () => {
        clearInterval(timer);
      },
      false
    );
    oUl.addEventListener(
      "mouseout",
      () => {
        timer = setInterval(() => {
          oUl.style.top = oUl.offsetTop - 5 + "px";
          if (oUl.offsetTop < -jie) {
            oUl.style.top = "0px";
          }
        }, 30);
      },
      false
    );
  }
}

export default WarnStatistics;
